<template>
  <div class="container">
    <div class="top">
      <div class="left"><img class="logo" src="@/assets/images/yy32.ico" />浦兴社区卫生服务中心</div>
      <div class="center">中医全科综合服务区</div>
      <div class="right">
        <div>
          <p>{{ week }}</p>
          <p>{{ date2 }}</p>
        </div>
        <p class="time">{{ time }}</p>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="title">就诊信息</div>
        <div class="title2">
          <span><van-icon name="add-o" /> 正在就诊</span>
        </div>
        <div class="nowbox">
          <vue3ScrollSeamless :classOptions="classOptionNow" :dataList="now" :step="1" :hover="true">
            <div v-for="(item, index) in now" :key="index" class="list2">
              <p>
                当前患者
                <span
                  ><span>{{ item.yyid }}</span> {{ item.hzxm }}</span
                >
              </p>
              <p>
                请至 <span>{{ item.zsmc }}</span>
              </p>
            </div>
          </vue3ScrollSeamless>
        </div>
        <div class="wait">
          <div class="title3">
            <span><van-icon name="clock-o" /> 等候就诊</span>
          </div>
          <div class="waitbox">
            <vue3ScrollSeamless :classOptions="classOptionWait" :dataList="wait" :step="1" :hover="true">
              <div v-for="(item, index) in wait" :key="index" class="list">
                <p></p>
                <p>
                  当前患者
                  <span
                    ><span>{{ item.yyid }}</span> {{ item.hzxm }}</span
                  >
                </p>
                <p>
                  请至 <span>{{ item.zsmc }}</span>
                </p>
              </div>
            </vue3ScrollSeamless>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="box1">
          <div class="title">今日坐诊医生</div>
          <div class="paibanbox">
            <vue3ScrollSeamless :classOptions="classOption" :dataList="paiban" :step="1" :hover="true">
              <div v-for="(item, index) in paiban" :key="index">
                <p>
                  <span class="apartment"> {{ item.zsmc }}</span>
                  <span class="morning">{{ item.ysxm }}</span>
                  <span class="afternoon">{{ item.ysxm2 }}</span>
                </p>
              </div>
            </vue3ScrollSeamless>
          </div>
        </div>
        <div class="box2">
          <div class="title">最新资讯</div>
          <vue3ScrollSeamless class="v-s-s" :dataList="state" :step="1" :hover="true">
            <div class="v-s-s_item" v-for="(item, index) in state" :key="index">
              <p><van-icon name="volume-o" color="#ed6a0c" /> {{ item.title }}</p>
            </div>
          </vue3ScrollSeamless>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import dayjs from "dayjs"
import { onMounted, onUnmounted, reactive, ref } from "vue"
import { getDayPbList, getDayJzzAndWjzList, getZxxxList } from "@/api/zyjh.js"
// import { Vue3SeamlessScroll } from "vue3-seamless-scroll"  //注意这个插件不用了
import { vue3ScrollSeamless } from "vue3-scroll-seamless" //用这个升级的插件
// let date1 = dayjs().format("YYYY-MM-DD")
let date2 = dayjs().format("YYYY") + "年" + dayjs().format("MM") + "月" + dayjs().format("DD") + "日"
let time = ref("")
let week
const getWeek = () => {
  var datas = dayjs().day()
  var week = ["日", "一", "二", "三", "四", "五", "六"]
  return "星期" + week[datas]
}
week = getWeek()
let classOption = {
  step: 1, // 数值越大速度滚动越快
  limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
  hoverStop: false, // 是否开启鼠标悬停stop
  direction: 1, // 0向下 1向上 2向左 3向右
  openWatch: false, // 开启数据实时监控刷新dom
  singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
  singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
  waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
let classOptionNow = {
  step: 0.5, // 数值越大速度滚动越快
  limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
  hoverStop: false, // 是否开启鼠标悬停stop
  direction: 1, // 0向下 1向上 2向左 3向右
  openWatch: false, // 开启数据实时监控刷新dom
  singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
  singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
  waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
let classOptionWait = {
  step: 0.5, // 数值越大速度滚动越快
  limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
  hoverStop: false, // 是否开启鼠标悬停stop
  direction: 1, // 0向下 1向上 2向左 3向右
  openWatch: false, // 开启数据实时监控刷新dom
  singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
  singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
  waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}

let paiban = ref([])
let now = ref([])
let wait = ref([])
let state = ref([])
let timer = null
let timer2 = null
let timer3 = null

onMounted(() => {
  timer3 = setInterval(() => {
    time.value = dayjs().format("HH:mm")
  }, 1000)
  getZxxxList().then((res) => {
    const { data } = res.data
    state.value = data
  })
  timer = setInterval(() => {
    getDayJzzAndWjzList().then((res) => {
      const { jzz, wjz } = res.data.data
      now.value = jzz
      wait.value = wjz
    })
  }, 60 * 1000)
  timer2 = setInterval(() => {
    getDayPbList().then((res) => {
      const { data } = res.data
      paiban.value = data
    })
  }, 5 * 60 * 1000)
})
onUnmounted(() => {
  clearInterval(timer)
  clearInterval(timer2)
  clearInterval(timer3)
})
</script>
<style lang="scss" scoped>
.container {
  background: url("@/assets/images/bgImage.png");
  background-size: cover;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  font-size: 16px;
  .title {
    text-align: center;
    font-weight: bold;
    color: #333;
    font-size: 18px;
    padding: 5px;
    margin-bottom: 8px;
    border-bottom: 1px dotted #999;
  }
  .top {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 10px;
    color: #000;
    .left {
      display: flex;
      .logo {
        width: 27px;
        height: 27px;
        margin-top: -3px;
      }
    }

    .center {
      font-size: 26px;
      font-weight: bold;
      margin-top: -10px;
    }
    .right {
      display: flex;
      div {
        text-align: right;
        font-size: 12px;
      }
      .time {
        font-size: 32px;
        margin-top: -5px;
        margin-left: 5px;
      }
    }
  }
  .content {
    display: flex;
    .left {
      width: 30%;
      height: 350px;
      margin-right: 12px;
      background-color: #fff;
      padding: 10px;
      border-radius: 10px;
      overflow: auto;
      .title2 {
        font-size: 12px;
        margin-bottom: 6px;
        span {
          background: #ed6a0c;
          padding: 2px 10px;
          color: #fff;
          border-radius: 10px;
        }
      }
      .list {
        margin-bottom: 15px;
        color: #0a224e;
        p {
          font-size: 15px;
          text-align: center;
          margin-bottom: 5px;
          span {
            background: rgba(62, 123, 250, 0.2);
            border-radius: 10px;
            padding: 2px 3px;
          }
        }
      }
      .nowbox {
        width: 100%;
        height: 115px;
        // border: 1px solid red;
        overflow: hidden;
        .list2 {
          margin-bottom: 15px;
          color: #0a224e;

          p {
            font-size: 15px;
            text-align: center;
            margin-bottom: 5px;
            span {
              // color: #ed6a0c;
              background: rgba(237, 106, 12, 0.2);
              border-radius: 10px;
              padding: 2px 3px;
            }
          }
        }
      }
      .wait {
        margin-top: 10px;
        .title3 {
          font-size: 12px;
          margin-bottom: 5px;

          span {
            background: #3e7bfa;
            padding: 2px 10px;
            color: #fff;
            border-radius: 10px;
          }
        }
        .waitbox {
          width: 100%;
          height: 115px;
          overflow: hidden;
          // border: 1px solid blue;
        }
      }
    }
    .right {
      width: 70%;
      height: 350px;
      background-color: #fff;
      display: flex;
      border-radius: 10px;
      .box1 {
        width: 60%;
        box-sizing: border-box;
        padding: 10px;
        .paibanbox {
          height: 280px;
          width: 100%;
          overflow: hidden;
          color: #555;
          p {
            color: #333;
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            border-bottom: 1px solid #3e7bfa;
            span {
              display: inline-block;
            }
            .apartment {
              color: #3e7bfa;
              text-align: center;
              font-size: 16px;
              width: 50%;
            }
            .morning {
              width: 25%;
              font-size: 16px;
              text-align: center;
            }
            .afternoon {
              text-align: center;
              width: 25%;
              font-size: 16px;
            }
          }
        }
      }
      .box2 {
        width: 40%;
        box-sizing: border-box;
        padding: 10px;

        .v-s-s {
          height: 280px;
          width: 100%;
          overflow: hidden;
          color: #555;
          font-size: 14px;
          font-weight: 100px;
          margin-bottom: 10px;
          margin-top: 10px;
          .v-s-s_item {
            p {
              text-align: left;
              margin-bottom: 10px;
              color: #333;
              line-height: 22px;
            }
          }
        }
      }
    }
  }
}
</style>
